import React, { Component } from 'react';
import { Select, Row, Col, Input, InputNumber } from 'antd';
import { ImageUpload } from './../component/ImageUpload';
import { Editor } from './../component/Editor'

const Option = Select.Option;

/**
 * 表单组件渲染工具
 */
class FieldRender {

    /**
     * 判断渲染工具是否支持该种组件类型的渲染
     * @param {*string} type 组件类型
     */
    static support(type) {
        const types = {
            select: 1,
            text: 1,
            imageUpload: 1,
            number: 1,
            textarea: 1,
            editor: 1
        };
        return types[type];
    }

    /**
     * 渲染组件,支持:
     * 
     * 下拉框:
     * {
     *   name: 'type',
     *   label: '位置',
     *   type: 'select',
     *   options: [
     *       { label: '全部', value: 0 },
     *       { label: '首页', value: 1 }
     *   ],
     *   option: {
     *       initialValue: '0'
     *   }
     * }
     * 
     * 文本框:
     * {
     *   name: 'name',
     *   label: '名称',
     *   type: 'text', //文本域为textarea
     *   option: {
     *       rules: [
     *           { required: true, message: '请输入' }
     *       ]
     *   }
    *  }
     * 
     * 数字框:
     *  {
     *   name: 'sort',
     *   label: '排序',
     *   type: 'number'
     *  }
     * 
     * 图片上传:
     *  {
     *   name: 'imageId',
     *   label: '图片',
     *   type: 'imageUpload'
     *  }
     * 
     * 
     * 富文本:
     * {
     *   name: 'content',
     *   label: '内容',
     *   type: 'editor'
     *  }
     * 
     * @param {*object} field 
     */
    static render(field) {
        if (field.type === 'select') {
            return (
                <Select style={{ width: 150 }} {...field.props}>
                    {field.options.map((option, idx) => <Option key={'toolbar-filed-opton-' + field.name + '-' + idx} value={option.value}>{option.label}</Option>)}
                </Select>
            );
        } else if (field.type === 'text') {
            return <Input type="text" placeholder={'请输入' + field.label} {...field.props} />;
        } else if (field.type === 'number') {
            return <InputNumber {...field.props} />
        } else if (field.type === 'imageUpload') {
            return <ImageUpload name={field.name} {...field.props} />;
        } else if (field.type === 'textarea') {
            return <Input.TextArea rows={5} placeholder={'请输入' + field.label} {...field.props} />
        } else if (field.type === 'editor') {
            return <Editor {...field.props} />;
        }
    }
}


export {FieldRender};